<template>
  <view class="search-page">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input-container">
        <image src="/static/search-line.png" class="search-icon" />
        <input 
          class="search-input" 
          placeholder="搜索歌曲、歌手..." 
          placeholder-class="search-placeholder"
          v-model="searchKeyword"
          @input="onSearchInput"
          focus
        />
        <text class="search-cancel" @tap="goBack">取消</text>
      </view>
    </view>

    <!-- 搜索结果区域 -->
    <view class="search-content">
      <!-- 热门搜索 -->
      <view v-if="!searchKeyword" class="hot-search">
        <text class="section-title">热门搜索</text>
        <view class="hot-tags">
          <text 
            v-for="tag in hotTags" 
            :key="tag" 
            class="hot-tag"
            @tap="searchByTag(tag)"
          >
            {{ tag }}
          </text>
        </view>
      </view>

      <!-- 搜索历史 -->
      <view v-if="!searchKeyword && searchHistory.length > 0" class="search-history">
        <view class="history-header">
          <text class="section-title">搜索历史</text>
          <text class="clear-history" @tap="clearHistory">清除</text>
        </view>
        <view class="history-list">
          <view 
            v-for="item in searchHistory" 
            :key="item" 
            class="history-item"
            @tap="searchByTag(item)"
          >
            <image src="/static/history-icon.png" class="history-icon" />
            <text class="history-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 歌曲搜索结果 -->
      <view v-if="searchKeyword && songResults.length > 0" class="result-section">
        <text class="section-title">歌曲</text>
        <view class="song-results">
          <view v-for="song in songResults" :key="song.id" class="song-result-item" @tap="playSong(song)">
            <image :src="song.cover" class="song-result-cover" mode="aspectFill" />
            <view class="song-result-info">
              <text class="song-result-name">{{ song.name }}</text>
              <text class="song-result-artist">{{ song.artist }}</text>
            </view>
            <text class="play-result-icon">▶</text>
          </view>
        </view>
      </view>

      <!-- 歌手搜索结果 -->
      <view v-if="searchKeyword && artistResults.length > 0" class="result-section">
        <text class="section-title">歌手</text>
        <view class="artist-results">
          <view v-for="artist in artistResults" :key="artist.id" class="artist-result-item">
            <image :src="artist.avatar" class="artist-avatar" mode="aspectFill" />
            <text class="artist-name">{{ artist.name }}</text>
          </view>
        </view>
      </view>

      <!-- 无结果提示 -->
      <view v-if="searchKeyword && songResults.length === 0 && artistResults.length === 0" class="no-results">
        <text class="no-results-text">没有找到相关结果</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      songResults: [],
      artistResults: [],
      searchHistory: [],
      hotTags: ['周杰伦', '林俊杰', '邓紫棋', '陈奕迅', '薛之谦', '毛不易'],
      // 模拟搜索数据
      searchData: {
        songs: [
          {
            id: 1,
            name: '骄傲',
            artist: '王源',
            cover: 'https://ai-public.mastergo.com/ai/img_res/9b30f4ee0302b8d25ce0fca941c22eca.jpg',
            url: 'https://music.163.com/song/media/outer/url?id=519909355.mp3',
            duration: 240
          },
          {
            id: 2,
            name: '夜的钢琴曲',
            artist: '石进',
            cover: 'https://ai-public.mastergo.com/ai/img_res/c1ce38ecf2bd6fbe61281df433ca6b50.jpg',
            url: 'https://music.163.com/song/media/outer/url?id=139774.mp3',
            duration: 180
          },
          {
            id: 3,
            name: '童话镇',
            artist: '陈一发儿',
            cover: 'https://ai-public.mastergo.com/ai/img_res/f9fc38e361ab67a35c0e5506eddd71df.jpg',
            url: 'https://music.163.com/song/media/outer/url?id=409916250.mp3',
            duration: 210
          },
          {
            id: 4,
            name: '起风了',
            artist: '买辣椒也用券',
            cover: 'https://ai-public.mastergo.com/ai/img_res/45336b12831b6117c08a852940c79512.jpg',
            url: 'https://music.163.com/song/media/outer/url?id=516076896.mp3',
            duration: 195
          },
          {
            id: 5,
            name: '骄傲 (Live)',
            artist: '王源',
            cover: 'https://ai-public.mastergo.com/ai/img_res/9b30f4ee0302b8d25ce0fca941c22eca.jpg',
            url: 'https://music.163.com/song/media/outer/url?id=519909355.mp3',
            duration: 240
          }
        ],
        artists: [
          {
            id: 1,
            name: '王源',
            avatar: 'https://ai-public.mastergo.com/ai/img_res/9b30f4ee0302b8d25ce0fca941c22eca.jpg'
          },
          {
            id: 2,
            name: '石进',
            avatar: 'https://ai-public.mastergo.com/ai/img_res/c1ce38ecf2bd6fbe61281df433ca6b50.jpg'
          },
          {
            id: 3,
            name: '陈一发儿',
            avatar: 'https://ai-public.mastergo.com/ai/img_res/f9fc38e361ab67a35c0e5506eddd71df.jpg'
          },
          {
            id: 4,
            name: '买辣椒也用券',
            avatar: 'https://ai-public.mastergo.com/ai/img_res/45336b12831b6117c08a852940c79512.jpg'
          }
        ]
      }
    }
  },
  
  onLoad(options) {
    this.loadSearchHistory()
    if (options.keyword) {
      this.searchKeyword = options.keyword
      this.performSearch()
    }
  },
  
  methods: {
    // 搜索输入
    onSearchInput() {
      this.performSearch()
    },
    
    // 执行搜索
    performSearch() {
      const keyword = this.searchKeyword.trim().toLowerCase()
      
      if (!keyword) {
        this.songResults = []
        this.artistResults = []
        return
      }
      
      // 搜索歌曲
      this.songResults = this.searchData.songs.filter(song => 
        song.name.toLowerCase().includes(keyword) || 
        song.artist.toLowerCase().includes(keyword)
      )
      
      // 搜索歌手
      this.artistResults = this.searchData.artists.filter(artist => 
        artist.name.toLowerCase().includes(keyword)
      )
      
      // 保存搜索历史
      if (keyword && !this.searchHistory.includes(keyword)) {
        this.searchHistory.unshift(keyword)
        if (this.searchHistory.length > 10) {
          this.searchHistory.pop()
        }
        this.saveSearchHistory()
      }
    },
    
    // 通过标签搜索
    searchByTag(tag) {
      this.searchKeyword = tag
      this.performSearch()
    },
    
    // 播放歌曲
    playSong(song) {
      // 这里需要实现播放逻辑
      uni.showToast({
        title: `播放: ${song.name}`,
        icon: 'none'
      })
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 加载搜索历史
    loadSearchHistory() {
      try {
        const history = uni.getStorageSync('searchHistory')
        if (history) {
          this.searchHistory = history
        }
      } catch (e) {
        console.error('加载搜索历史失败:', e)
      }
    },
    
    // 保存搜索历史
    saveSearchHistory() {
      try {
        uni.setStorageSync('searchHistory', this.searchHistory)
      } catch (e) {
        console.error('保存搜索历史失败:', e)
      }
    },
    
    // 清除搜索历史
    clearHistory() {
      this.searchHistory = []
      uni.removeStorageSync('searchHistory')
    }
  }
}
</script>

<style scoped>
.search-page {
  min-height: 100vh;
  background-color: #fff;
}

.search-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 20rpx 32rpx;
  z-index: 999;
  padding-top: calc(env(safe-area-inset-top, 40rpx) + 20rpx);
  height: calc(env(safe-area-inset-top, 40rpx) + 100rpx);
}

.search-input-container {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 50rpx;
  padding: 20rpx 32rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.search-placeholder {
  color: #999;
  font-size: 28rpx;
}

.search-cancel {
  font-size: 28rpx;
  color: #007aff;
  margin-left: 32rpx;
  padding: 16rpx 24rpx;
}

.search-content {
  padding-top: calc(env(safe-area-inset-top, 40rpx) + 140rpx);
  padding-bottom: 40rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  min-height: calc(100vh - env(safe-area-inset-top, 40rpx) - 140rpx);
}

.section-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
  margin-bottom: 24rpx;
  display: block;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.hot-tag {
  background-color: #f5f5f5;
  color: #333;
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;
}

.clear-history {
  font-size: 24rpx;
  color: #999;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 24rpx;
}

.history-text {
  font-size: 28rpx;
  color: #333;
}

.result-section {
  margin-bottom: 48rpx;
}

.song-results {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.song-result-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  transition: background-color 0.3s ease;
}

.song-result-item:active {
  background-color: #e8e8e8;
}

.song-result-cover {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
}

.song-result-info {
  flex: 1;
  min-width: 0;
}

.song-result-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-result-artist {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}

.play-result-icon {
  font-size: 32rpx;
  color: #007aff;
  padding: 16rpx;
}

.artist-results {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.artist-result-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
}

.artist-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

.artist-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.no-results {
  text-align: center;
  padding: 80rpx 32rpx;
}

.no-results-text {
  font-size: 28rpx;
  color: #999;
}
</style>